// 班级概况
const total=document.querySelector('.total')
const avgSalary=document.querySelector('.avgSalary')
const avgAge=document.querySelector('.avgAge')
const proportion=document.querySelector('.proportion')
const title=document.querySelector('.title')
const batch=document.querySelector('#batch')
// 班级概况
function rank() {
   axios({
    url:'/student/overview'
   }).then(res=>{
    //    console.log(res);
       let tt=res.data.data;
       total.innerHTML=tt.total
       avgSalary.innerHTML=tt.avgSalary
       avgAge.innerHTML=tt.avgAge
       proportion.innerHTML=tt.proportion

   })
}
rank();

// 收集学员数据
axios({
    url:'/student/list'
}).then(res=>{
    // console.log(res.data.data);
    let pieArr=[];
    let names=[],salarys=[],truesalarys=[]
    let chinaGeoCoordMap=[],chinaDatas=[]
    res.data.data.forEach((value,index)=>{
        //地图
        chinaGeoCoordMap[value.province]=[value.jing,value.wei];
        // chinaGeoCoordMap[value.province] = [value.jing, value.wei]
        // 数组对象
        chinaDatas.push([{ name:value.province, value:0}]);
        // console.log(value.province);
        // 饼图
        let obj=pieArr.filter((v)=>{
            return v.name==value.province
        })[0]
        if(obj){
            obj.value=obj.value+1;
        }else{
            pieArr.push({value:1,name:value.province});
        }
        // 折线图
        names.push(value.name);
        salarys.push(value.salary);
        truesalarys.push(value.truesalary)
    })
    // console.log(pieArr);
    drawPie(pieArr)
    drawLine(names,salarys,truesalarys)
    mapChart(chinaGeoCoordMap,chinaDatas)
})
// 静态饼图
function drawPie(data) {
    // 调用echarts的init创建一个图表实例
    // echarts.init(dom元素):dom元素就是图表的容器
    let mychart = echarts.init(document.querySelector('.pie'))
  
    // 指定图表的配置项和数据
    let option = {
      title: {
        text: '学员分布', // 主标题
        // subtext: 'Fake Data', //副标题
        left: 'left' // 位置
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      series: [
        {
          name: '学员分布', // 名称
          type: 'pie', // 类型，pie代表饼图
          radius: [30, 120], // 图表内外半径，可以用于设置图表大小
          center: ['50%', '50%'], // 图表的中心位置
          roseType: 'area',
          itemStyle: {
            borderRadius: 6 // 圆角
          },
          data: data
        }
      ]
    }
    // 调用图表实例的setOption方法根据指定的选项绘制图表
    mychart.setOption(option)
  }

  // 折线图
function drawLine(names,salarys,truesalarys) {
  let mychart = echarts.init(document.querySelector('.line'))

  let option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['期望薪资', '实际薪资']
    },
    xAxis: {
      type: 'category',
      data:names
    },
    yAxis: {
      type: 'value'
    },
    dataZoom: [
      {
        type: 'slider', // 拖动条显示到轴的外面（默认就是slider类型）
        start: 0, // 拖动滑块起始位置（这是一个百分比）
        end: 100 // 拖动滑块结束位置（这是一个百分比）
      }
    ],
    series: [
      {
        name: '期望薪资',
        data: salarys,
        type: 'line',
        smooth: true,
        lineStyle: {
          color: 'blue'
        }
      },
      {
        name: '实际薪资',
        data: truesalarys,
        type: 'line',
        smooth: true,
        lineStyle: {
          color: 'red'
        }
      }
    ]
  }
  // 调用图表实例的setOption方法根据指定的选项绘制图表
  mychart.setOption(option)
}

// 分组查询成绩
function addScore(time) {
    // 发请求
    axios({
        url:'/score/batch?batch='+time
    }).then(res=>{
        console.log(res);
        drawBar(res.data.data)
    })
}
addScore(1)
// 柱状图
function drawBar(data) {
    let mychart = echarts.init(document.querySelector('.barChart'))
    let option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          grid: {
            top: 30,
            bottom: '8%',
            left: '5%',
            right: '5%'
          },
          legend: {
            top: 5
          },
          xAxis: [
            {
              type: 'category',
              data: data.group,
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              min: 0,
              max: 100,
              interval: 10,
              axisLabel: {
                formatter: '{value} 分'
              }
            },
            {
              type: 'value',
              min: 0,
              max: 10,
              interval: 1,
              axisLabel: {
                formatter: '{value} 人'
              }
            }
          ],
          barWidth: '10%',
          series: [
            {
              name: '平均分',
              type: 'bar',
              data: data.avgScore
            },
            {
              name: '低于60分人数',
              type: 'bar',
              data: data.lt60,
              yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
            },
            {
              name: '60-80之间',
              type: 'bar',
              data: data.gt60,
              yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
            },
            {
              name: '高于80分人数',
              type: 'bar',
              data: data.gt80,
              yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
            }
          ]
    }
    mychart.setOption(option)
  }

// 切换成绩
title.addEventListener('click',function () {
    if(batch.style.display=='none'){
        batch.style.display='block'
      }else{
        batch.style.display='none'
      }
})
batch.addEventListener('click',function (e) {
    let id=e.target.dataset.id;
    addScore(id)
})

 // 地图
  // ----------------------- 地图 ------------------------------
  function mapChart(chinaGeoCoordMap,chinaDatas) {
  
    let myChart = echarts.init(document.querySelector('.map'));
  
    var convertData = function (data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var dataItem = data[i];
        var fromCoord = chinaGeoCoordMap[dataItem[0].name];
        var toCoord = [113.434256, 23.135315];
        if (fromCoord && toCoord) {
          res.push([{
            coord: fromCoord,
            value: dataItem[0].value
          }, {
            coord: toCoord,
          }]);
        }
      }
      return res;
    };
    var series = []
    ;[['广东省', chinaDatas]].forEach(function(item, i) {
      console.log(item)
      series.push(
        {
          type: 'lines',
          zlevel: 2,
          effect: {
            show: true,
            period: 4, //箭头指向速度，值越小速度越快
            trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
            symbol: 'arrow', //箭头图标
            symbolSize: 5 //图标大小
          },
          lineStyle: {
            normal: {
              width: 1, //尾迹线条宽度
              opacity: 1, //尾迹线条透明度
              curveness: 0.3 //尾迹线条曲直度
            }
          },
          data: convertData(item[1])
        },
        {
          type: 'effectScatter',
          coordinateSystem: 'geo',
          zlevel: 2,
          rippleEffect: {
            //涟漪特效
            period: 4, //动画时间，值越小速度越快
            brushType: 'stroke', //波纹绘制方式 stroke, fill
            scale: 4 //波纹圆环最大限制，值越大波纹越大
          },
          label: {
            normal: {
              show: true,
              position: 'right', //显示位置
              offset: [5, 0], //偏移设置
              formatter: function(params) {
                //圆环显示文字
                return params.data.name
              },
              fontSize: 13
            },
            emphasis: {
              show: true
            }
          },
          symbol: 'circle',
          symbolSize: function(val) {
            return 5 + val[2] * 5 //圆环大小
          },
          itemStyle: {
            normal: {
              show: false,
              color: '#f00'
            }
          },
          data: item[1].map(function(dataItem) {
            return {
              name: dataItem[0].name,
              value: chinaGeoCoordMap[dataItem[0].name].concat([
                dataItem[0].value
              ])
            }
          })
        },
        //被攻击点
        {
          type: 'scatter',
          coordinateSystem: 'geo',
          zlevel: 2,
          rippleEffect: {
            period: 4,
            brushType: 'stroke',
            scale: 4
          },
          label: {
            normal: {
              show: true,
              position: 'right',
              //offset:[5, 0],
              color: '#0f0',
              formatter: '{b}',
              textStyle: {
                color: "#0f0"
              }
            },
            emphasis: {
              show: true,
              color: "#f60"
            }
          },
          symbol: 'pin',
          symbolSize: 50,
          data: [{
            name: item[0],
            value: chinaGeoCoordMap[item[0]].concat([10]),
          }],
        }
      );
    });
  
    // 
    let option = {
      // 标题
      title: {
        // left: 'center',
        text: '来京路线 From',
        textStyle: {
          color: '#6d767e'
        }
      },
      tooltip: {
        trigger: 'item',
        backgroundColor: 'rgba(166, 200, 76, 0.82)',
        borderColor: '#FFFFCC',
        showDelay: 0,
        hideDelay: 0,
        enterable: true,
        transitionDuration: 0,
        extraCssText: 'z-index:100',
        formatter: function (params, ticket, callback) {
          //根据业务自己拓展要显示的内容
          var res = "";
          var name = params.name;
          var value = params.value[params.seriesIndex + 1];
          res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
          return res;
        }
      },
      backgroundColor: "#fff",
      visualMap: { // 图例值控制（官方叫做视觉映射组件）
        min: 0,
        max: 1,
        calculable: true,
        show: false,
        color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
        textStyle: {
          color: '#fff'
        }
      },
      geo: {
        map: 'china',
        zoom: 1.2,
        label: {
          emphasis: {
            show: false
          }
        },
        roam: true, //是否允许缩放
        itemStyle: {
          normal: {
            color: 'rgba(51, 69, 89, .5)', //地图背景色
            borderColor: '#516a89', //省市边界线00fcff 516a89
            borderWidth: 1
          },
          emphasis: {
            color: 'rgba(37, 43, 61, .5)' //悬浮背景
          }
        }
      },
      series: series
    };
  
    myChart.setOption(option);
  }